<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>贵州文化历史网</title>
    <meta name="keywords" content="个人博客,杨青个人博客,个人博客模板,杨青" />
    <meta name="description" content="杨青个人博客，是一个站在web前端设计之路的女程序员个人网站，提供个人博客模板免费资源下载的个人原创网站。" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="__static__/home/css/base.css" rel="stylesheet">
    <link href="__static__/home/css/index.css" rel="stylesheet">
    <link href="__static__/home/css/m.css" rel="stylesheet">
    <link href="__static__/layui/css/layui.css" rel="stylesheet">
    <script src="__static__/home/js/jquery.min.js"></script>
    <script src="__static__/home/js/jquery.easyfader.min.js"></script>
    <script type="text/javascript" src="__static__/layui/layui.js"></script>
    <script type="text/javascript" src="__static__/lib/layer/2.4/layer.js"></script>

    <!--[if lt IE 9]>
<script src="__static__/home/js/modernizr.js"></script>
<![endif]-->
    <script>

        window.onload = function () {
            var oH2 = document.getElementsByTagName("h2")[0];
            var oUl = document.getElementsByTagName("ul")[0];
            oH2.onclick = function () {
                var style = oUl.style;
                style.display = style.display == "block" ? "none" : "block";
                oH2.className = style.display == "block" ? "open" : ""
            }
        }
    </script>
    <style type="text/css">

        a {text-decoration: none;color: black;}
        .box{width: 45%;height: 300px;overflow: hidden;position: relative;float: left;margin-right: 35px;}
        .box-1 ul{}
        .box-1 ul li{width: 500px;height: 300px;position: relative;overflow: hidden;}
        .box-1 ul li img{display:block;width: 100%; height: 100%;}
        .box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:300px;background: rgba(125,125,120,.4);text-indent: 2em;
            padding-right:500px ;font-size: 15px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
            white-space: nowrap;font-weight: normal;color: ghostwhite}
        .box-2{position: absolute;right: 10px;bottom: 14px;}
        .box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
            background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
        .box-2 ul .on{background: rgba(255,255,255,0.6);}
        .box-3 span{position: absolute;color: rgba(1,1,1, 0);width: 20px;height: 40px;
            top:50%; font-family: "宋体";line-height: 80px;font-size:40px;margin-top: -40px;
            text-align: center;cursor: pointer;font-weight: 900}
        .box-3 .prev{left: 10px;}
        .box-3 .next{right: 10px;}
        .box-3 span::selection{background: transparent;}
        .box-3 span:hover{color: #8AB2C9}
    </style>
</head>

<body>

<div class="layui-carousel" id="test10">
    <div carousel-item="">
        <div><img src="//res.layui.com/images/layui/demo/1.png"></div>
        <div><img src="//res.layui.com/images/layui/demo/2.png"></div>
        <div><img src="//res.layui.com/images/layui/demo/3.png"></div>
        <div><img src="//res.layui.com/images/layui/demo/4.png"></div>
        <div><img src="//res.layui.com/images/layui/demo/5.png"></div>
        <div><img src="//res.layui.com/images/layui/demo/6.png"></div>
        <div><img src="//res.layui.com/images/layui/demo/7.png"></div>
    </div>
</div>
    <header>
        {include file="./public/top"}
    </header>
    <article>




        <div class="banner" >
            <div id="sucaihuo" class="fader">
                {volist name="banner" id="banner"}
                <img class="slide" src="{$banner.url}">
                {/volist}
                <div class="fader_controls">
                    <div class="page prev" data-target="prev">&lsaquo;</div>
                    <div class="page next" data-target="next">&rsaquo;</div>
                    <ul class="pager_list">
                    </ul>
                </div>
            </div>
            <script>
                $(function () {
                    $('#sucaihuo').easyFader();
                });
            </script>
        </div>

<!--        中间板块-->
        <div class="newblogs" style="width: 100%">
            <h2 class="hometitle">精推内容</h2>
            <ul>
                <li>
                    <div class="bloginfo">
                        <div class="box">
                            <div class="box-1">
                                <ul>
                                    {volist name="sift_banner" id="sift_banner"}
                                    <li>
                                        <img src="{$sift_banner.url}"></img>
                                    </li>
                                    {/volist}
                                </ul>
                            </div>
                            <div class="box-2">
                                <ul>

                                </ul>
                            </div>
                            <div class="box-3">
                                <span class="prev"> < </span>
                                <span class="next"> > </span>
                            </div>
                        </div>
                        <div style="overflow-y: hidden;height: 268px;">
                            <span onclick="sift()" style="font-size: 20px;padding: 10px;letter-spacing: 1px;font-family: '华文楷体'">{$sift_art.content}</span>
                        </div>
                        <span style="font-size: 22px;">......</span>
                    </div>



                    <div class="autor"><span class="lm f_l"></span><span
                      class="dtime f_l">{$sift_art.update_time}</span><span class="viewnum f_l"><a
                      href="/">1429</a></span><span class="f_r"><a href="{:url('article/detail', array('id' => $sift_art.id))}"
                                                                   class="more">阅读>></a></span></div>
                    <div class="line"></div>
                </li>
            </ul>
        </div>

        <div class="newblogs" style="margin-top: 30px">
            <h2 class="hometitle">最新文章</h2>

            <ul>
                {volist name="artres" id="artres"}
                <li>
                    <h3 class="blogtitle"><span><a href="{:url('article/detail', array('id' => $artres.id))}" title="css3" target="_blank"
                                class="classname">{$artres.catename}</a></span><a href="{:url('article/detail', array('id' => $artres.id))}"
                            target="_blank">{$artres.title}</a></h3>
                    <div class="bloginfo"><span class="blogpic"><a href="{:url('article/detail', array('id' => $artres.id))}"
                                title="{$artres.title}}"><img src="{$artres.thumb}" alt="暂无" /></a></span>
                        <p>{$artres.desc}</p>
                    </div>
                    <div class="autor"><span class="lm f_l"></span><span
                            class="dtime f_l">{$artres.update_time}</span><span class="viewnum f_l">点赞<a
                                href="#" onclick="zan({$artres.id})">{$artres.zan}</a></span><span class="f_r"><a href="{:url('article/detail', array('id' => $artres.id))}"
                                class="more">阅读>></a></span></div>
                    <div class="line"></div>
                </li>
                {/volist}
            </ul>

        </div>
        <div class="rbox" style="margin-top: 30px">

            <div class="paihang">
                <h2 class="hometitle">历史分类</h2>
                <div class="fenlei" style="margin-left: 10px;font-size: 18px;">
                    <ul>
                        {volist name="cateres" id="cateres"}
                        <li></li><a href="{:url('cate/index', array('type' => $cateres.typez , 'cid' => $cateres.id))}">{$cateres.catename}</a></li>
                        {/volist}
                    </ul>
                </div>
            </div>

            <div class="paihang">
                <h2 class="hometitle">本栏推荐</h2>
                <ul>
                    {volist name="artres_qi" id="artres_qi"}
                    <li><b><a href="{:url('article/detail' , array('id' => $artres_qi.id))}" target="_blank">{$artres_qi.title}...</a></b>
                        <p><i><img src="{$artres_qi.thumb}" /></i>{$artres_qi.desc}
                        </p>
                    </li>
                    {/volist}
                </ul>
            </div>
            <!-- <div class="links">
                <h2 class="hometitle">友情链接</h2>
                <ul>
                    <li><a href="http://www.yangqq.com">杨青个人博客</a></li>
                    <li><a href="http://www.yangqq.com/download/">个人博客模板</a></li>
                    <li><a href="http://www.yangqq.com/link.html">优秀个人博客</a></li>
                </ul>
            </div>
            <div class="weixin">
                <h2 class="hometitle">官方微信</h2>
                <ul>
                    <img src="__static__/home/images/wx.jpg">
                </ul>
            </div> -->
        </div>
    </article>
</body>

<script type="text/javascript">

    function sift() {
        window.location.href = "{:url('index/article/sift', array('id' => $sift_art.id))}"
    }

    function zan(id){
        // alert(id)
        $.ajax({
            type: 'get',
            url: "{:url('index/article/zan')}",
            data: { id: id },
            dataType: 'json',
            success: function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, { icon: 1, time: 1000 });
                    // setTimeout(function () {
                    //     window.location.href = "{:url('admin/login')}";
                    // }, 1500)
                } else {
                    layer.msg(res.msg);
                }

            },
            error: function (res) {
                console.log('失败');
            },
        });
    }

    window.onload = function(){
        function $(param){
            if(arguments[1] == true){
                return document.querySelectorAll(param);
            }else{
                return document.querySelector(param);
            }
        }
        var $box = $(".box");
        var $box1 = $(".box-1 ul li",true);
        var $box2 = $(".box-2 ul");
        var $box3 = $(".box-3");
        var $length = $box1.length;

        var str = "";
        for(var i =0;i<$length;i++){
            if(i==0){
                str +="<li class='on'>"+(i+1)+"</li>";
            }else{
                str += "<li>"+(i+1)+"</li>";
            }
        }
        $box2.innerHTML = str;

        var current = 0;

        var timer;
        timer = setInterval(go,3000);
        function go(){
            for(var j =0;j<$length;j++){
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            if($length == current){
                current = 0;
            }
            $box1[current].style.display = "block";
            $box2.children[current].className = "on";
            current++;
        }

        for(var k=0;k<$length;k++){
            $box1[k].onmouseover = function(){
                clearInterval(timer);
            }
            $box1[k].onmouseout = function(){
                timer = setInterval(go,3000);
            }
        }
        for(var p=0;p<$box3.children.length;p++){
            $box3.children[p].onmouseover = function(){
                clearInterval(timer);
            };
            $box3.children[p].onmouseout = function(){
                timer = setInterval(go,3000);
            }
        }

        for(var u =0;u<$length;u++){
            $box2.children[u].index  = u;
            $box2.children[u].onmouseover = function(){
                clearInterval(timer);
                for(var j=0;j<$length;j++){
                    $box1[j].style.display = "none";
                    $box2.children[j].className = "";
                }
                this.className = "on";
                $box1[this.index].style.display = "block";
                current = this.index +1;
            }
            $box2.children[u].onmouseout = function(){
                timer = setInterval(go,3000);
            }
        }

        $box3.children[0].onclick = function(){
            back();
        }
        $box3.children[1].onclick = function(){
            go();
        }
        function back(){
            for(var j =0;j<$length;j++){
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            if(current == 0){
                current = $length;
            }
            $box1[current-1].style.display = "block";
            $box2.children[current-1].className = "on";
            current--;
        }
    }
</script>

<script>



    function user_edit() {
        window.open('page.html', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
    }


    layui.use(['carousel', 'form','layer'], function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer;
        var carousel = layui.carousel
          ,form = layui.form;//独立版的layer无需执行这一句




        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '778px'
            ,height: '440px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                  ,key = othis.data('key')
                  ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };


        //触发事件
        var active = {
            setTop: function () {
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '当你选择该窗体时，即会在最顶端'
                    , area: ['400px', '360px']
                    , shade: 0
                    , maxmin: true
                    , offset: [ //为了演示，随机坐标
                        Math.random() * ($(window).height() - 300)
                        , Math.random() * ($(window).width() - 390)
                    ]
                    , content: '//layer.layui.com/test/settop.html'
                    , btn: ['继续弹出', '全部关闭'] //只是为了演示
                    , yes: function () {
                        $(that).click();
                    }
                    , btn2: function () {
                        layer.closeAll();
                    }

                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
            , confirmTrans: function () {
                //配置一个透明的询问框
                layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了', '哦']
                });
            }
            , notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    , title: '用户信息修改' //不显示标题栏
                    , closeBtn: false
                    , area: '600px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['火速围观', '残忍拒绝']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: '<div style="padding: 50px; line-height: 22px; background-color: #FFFFFF; black: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
                    , success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'http://www.layui.com/'
                            , target: '_blank'
                        });
                    }
                });
            }
            , offset: function (othis) {
                var type = othis.data('type')
                    , text = othis.text();

                layer.open({
                    type: 1
                    , title: '用户信息修改' //不显示标题栏
                    , area: '500px;'
                    , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'layerDemo' + type //防止重复弹出
                    // ,content: '<div style="padding: 200px 100px;">'+ text +'</div>'
                    , content: '<div style="padding: 40px 10px;height:120px;margin-left:11%;" class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input id="name" style="width:200px;" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input" value="{$Request.session.username}">  </div> <label class="layui-form-label"  style="margin-top: 20px;">密码</label> <div class="layui-input-block"> <input id="password" style="width:200px;margin-top: 20px;" type="password" name="password" lay-verify="title" autocomplete="off" class="layui-input">  </div>  </div> '
                    , btn: ['确认修改', '取消操作']
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        var id = { $Request.session.userid };
                        var name = $("#name").val();
                        var password = $("#password").val();
                        // alert(id);
                        // 发送请求
                        $.ajax({
                            type: 'post',
                            url: "{:url('index/admin/edit')}",
                            data: { name: name, password: password, id: id },
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 1) {
                                    layer.msg(res.msg, { icon: 1, time: 1000 });
                                    setTimeout(function () {
                                        window.location.href = "{:url('admin/login')}";
                                    }, 1500)
                                } else {
                                    layer.msg(res.msg);
                                }

                            },
                            error: function (res) {
                                console.log(res.msg);
                            },
                        });

                    }
                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>

</html>
